<template>
  <div class="nav-header">
    <el-icon class="fold-mune" :size="30" @click="handleFoldChang">
      <component :is="isFold ? 'Expand' : 'Fold'"></component>
    </el-icon>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from "vue";
const emits = defineEmits(["changeFold"]);
const isFold = ref(false);
const handleFoldChang = () => {
  isFold.value = !isFold.value;
  emits("changeFold", isFold.value);
};
</script>

<style scoped lang="less">
.nav-header {
  .fold-mune {
    cursor: pointer;
  }
}
</style>
